<!--
 * @Author: 灰灰
 * @Date: 2022-01-04 08:32:19
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 19:32:50
 * @Description: 左右两个Y轴
-->
<template>
  <el-row :gutter="10">
    <el-divider>双y轴 折线-柱状图</el-divider>
    <echart-view :needImg="needImg"
                 :option="chartOption"></echart-view>
  </el-row>
</template>

<script>
import chartMixin from '@/mixins/echartMixins/baseChartOption'
export default {
  name: 'echart',
  mixins: [chartMixin],
  props: {
    needImg: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    setTimeout(() => {
      this.loadData()
    }, 1000);
  },
  methods: {
    loadData () {
      this.configLegend({
        data: ['bar1', 'bar2', 'line']
      })
      this.configXAxis({ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] });
      // 生成双y轴
      const yAxis1 = {
        type: 'value',
        name: 'yAxis1',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      };
      const yAxis2 = {
        type: 'value',
        name: 'yAxis2',
        min: 0,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
      this.configYAxis([yAxis1, yAxis2]);

      this.configDataZoom(null)
      const seriesLine = this.generateLineData({
        name: 'line',
        yAxisIndex: 1,
        data: [15, 23, 22, 28, 15, 17, 20]
      });
      const seriesBar = this.generateBarData({
        name: 'bar1',
        data: [150, 230, 224, 28, 35, 147, 26]
      })
      const seriesBar2 = this.generateBarData(
        {
          name: 'bar2',
          data: [50, 20, 22, 28, 85, 47, 79]
        })
      const series = [seriesBar, seriesBar2, seriesLine];
      this.configSeries(series);
    }
  }
}
</script>

<style>
</style>